Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    //scope:this,

    onReady: function() {
    	var tapHandler = function(button, event) {
    		var txt = "User tapped the '" + button.text + event +  "' button.";
            //Ext.getCmp('toolbartxt').update(txt);
            alert('Back Button Click');
            //document.location="test1.html";
        };
        var tapHandler2 = function(button, event) {
            var txt = "User tapped the '" + button.text + event +  "' button.";
            alert('����������..');
        };
        var buttonsGroupT = [{
            text: 'back',
            ui: 'back',
            //iconCls: 'back',
            //iconAlign: 'left',
            //iconMask:true,
            handler: tapHandler
        } , {
            text: 'Default',
            handler: tapHandler
        }, {
            text: 'Round',
            ui: 'round',
            handler: tapHandler
        } ];

        var buttonsGroupB = [
           // xtype: 'segmentedbutton',
           // allowMultiple: true,
           /*
            listeners : {
                toggle : function(container, button, active){
                    var txt = "User toggled the '" + button.text + "' button: " + (active ? 'on' : 'off');
                    Ext.getCmp('toolbartxt').update(txt);
                }
            }
            */
           {
        	   text: '홈으로',
        	   iconCls : 'home',
        	   iconAlign: 'top',
        	   iconMask:true,     
        	   cls: 'card1',           
        	   handler: function(){
        		   panel.layout.setActiveItem(panel_login);
        	   }
            }, {
            	text: '공지',
            	iconCls : 'info',
            	iconAlign: 'top',
            	iconMask:true,    
            	cls: 'card2',            
            	handler: function(){
                	panel.layout.setActiveItem(panel_menu);
                }
            }, {
            	text: '이벤트',
            	iconCls : 'favorites',
            	iconAlign: 'top',
                iconMask:true,        
                cls: 'card3',        
                handler: function(){
                	panel.layout.setActiveItem(panel_list);
                }
            }, {
            	text: '영업점',
            	iconCls : 'search',
            	iconAlign: 'top',
                iconMask:true,    
                cls: 'card4',            
                handler: function(){
                	panel.layout.setActiveItem(panel_chart);
                }
            }, {
                text: '종료',
                iconCls : 'delete',
                handler: tapHandler,
                iconAlign: 'top',
                cls: 'card5',
                iconMask:true,
                handler: function(){
                	panel.layout.setActiveItem(panel_ext4_chart);
                }               
            }
        ];

        var dockedItems = [{
        	xtype: 'toolbar',
        	ui: 'light',
        	items: buttonsGroupT,
        	title: 'IBK 기업은행',
        	dock: 'top'
        }, {
        	xtype: 'toolbar',
            ui: 'light',
            items: buttonsGroupB,
            dock: 'bottom',
            layout: {
				pack: 'center'
			},      
			cardSwitchAnimation: {
				type: 'slide',
				cover: true
            }
        }];
        
        /*
         * 2. proxy��.
         * - model, reader ��.
         * -
         */  
        var objProxy = new Ext.data.AjaxProxy({
            url: 'data.php',
            type:'ajax',
            model:'mydata',
            reader:{
                type:'json',
                totalProperty:"total",
                successProperty:"success",
                root:'rows'
            },
        });

        /*
        new Ext.Panel({
            id: 'toolbartxt',
            //html: 'Pick a button, any button. <br /><small>By using SASS, all of the buttons on this screen can be restyled dynamically. The only images used are masks.</small>',
            fullscreen: true,
            layout:'card',
            items:[{
            	cls:'card1',
            	html:'card 1'
	        }, {
	        	cls:'card1',
	        	html:'card 2'
	        }],
            //styleHtmlContent: true,
            defaults:{ 
            	scroll:'vertical'
            },
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide',
                cover: true
            },    
            dockedItems: dockedItems,
        });
        */
        /* 	
        var  panel_login = new Ext.form.FormPanel({
   		
   			fullscreen:true,
   			useCurrentLocation: true,   			
    		scroll:'vertical',
			cardSwitchAnimation:"slide",


		    layout: {
		        type: 'vbox',
		        pack: 'center',
		        align: 'stretch'
		    },
		    scroll: 'vertical',

    		         	            
    		items:[{
                xtype: 'fieldset',
                title: '�α���',
                instructions: '���̵�� ��ȣ�� �Է��Ͻʽÿ�',
                defaults: {
                    required: true,
                    labelAlign: 'left',
                    labelWidth: '40%'
                },
    			items:[{
    				
    				xtype:'textfield',
    				name:'userid',
    				label:'���̵�',
    				placeHolder:'�����ȣ',
    				autoCapitalisze:true,
    				useClearIcon:false
    			},{
    				xtype:'passwordfield',
    				name: 'password',
    				placeHolder:'������ȥ�� 6��',
    				label: '��ȣ',
    				useClearIcon:true
    			},{
					layout: {
						type: 'hbox',
						pack: 'center',
						
					},  
					flex: 2, style: 'margin: .5em;',  				
    				items:[{
	    				xtype:'button',
	    				ui: 'decline-round',
	    				name:'button_login',
			            //iconCls: 'confirm',
			            //iconAlign: 'left',
			            //iconMask:true,  	
			            handler:tapHandler,
	                				
	    				text:'�α���'
	    			},{
	    				xtype:'button',
	    				ui: 'decline-round',
	    				name:'button_end',
			            //iconCls: 'cancel',
			            //iconAlign: 'left',
			            //iconMask:true,  	    				
	    				text:'����'
					}]	    				    			
    			}]
    		}],
    		click_login:function(){
    			alert('hi1');
    		}    		
    		
    	});           	
       
        var  panel_extra = new Ext.form.FormPanel({
   		
   			useCurrentLocation: true,   			
    		scroll:'vertical',
			cardSwitchAnimation:"cube",

    		         	            
    		items:[{

    			xtype: 'fieldset',
    			title: '�α���_Extra',
    			instructions: '���̵�, �н����带 �Է��ϼ���',
    			default:{
    				labelWidth:'30%',

    			},
    			items:[{
    				
    				xtype:'textfield',
    				name:'userid',
    				label:'���̵�',
    				placeHolder:'�����ȣ',
    				autoCapitalisze:true,
    				useClearIcon:false
    			},{
    				xtype:'passwordfield',
    				name: 'password',
    				placeHolder:'������ȥ�� 6��',
    				label: '��ȣ',
    				useClearIcon:true
    			},{
    				scroll: 'horisontal',
    				width: '40%',
    				
    				items:[{
	    				xtype:'button',
	    				ui: 'confirm-round',
	    				name:'button_login',
			            //iconCls: 'confirm',
			            //iconAlign: 'left',
			            //iconMask:true,  	
			            handler:tapHandler,
			            listeners: {
	    					click:function(button, event){
	    						alert('form');
	    						//console.log(text,oldVal,newVal);
	    					}	
    					},		                				
	    				text:'�α���'
	    			},{
	    				xtype:'button',
	    				ui: 'confirm-round',
	    				name:'button_end',
			            //iconCls: 'cancel',
			            //iconAlign: 'left',
			            //iconMask:true,  	    				
	    				text:'����'
					}]	    				    			
    			}]
    		}],
    		click_login:function(){
    			alert('hi1');
    		}    		
    		
    	}); 
    	*/  
        
		panel = new Ext.Panel({
    		fullscreen:true,
    		scroll:'vertical',
			cardSwitchAnimation:"slide",
			layout:'card',	
    		items: [panel_login, panel_extra],
    		dockedItems: dockedItems,
    	});    
    	panel.show(); 
    	
    	   // panel.doComponentLayout();
    	//this.button_login.on('click', this.click_login, this);
    }
    /* 
    ,
    frmLogin:function()
    {
    	new Ext.form.FormPanel({
    		fullscreen:true,
    		scroll:'vertical',
    		items[{
    			xtype: 'fieldset',
    			title: '�α���',
    			instruction: '���̵�, �н����带 �Է��ϼ���',
    			default:{
    				labelWidth:'30%',
    				listeners:{
    					change:function(text, oldVal,newVal)
    					{
    						console.log(text,oldVal,newVal);
    					}
    				}
    			},
    			items:[{
    				xtype:'textfield',
    				name:'userid',
    				label:'���̵�',
    				placeHolder:'�����ȣ',
    				autoCapitalisze:true,
    				useClearIcon:false
    			},{
    				xtype:'passwordfield',
    				name: 'password',
    				label: '��ȣ',
    				useClearIcon:true
    			}]
    		}]
    	})
    }
    */
});
Ext.ns('panel_login', 'panel_extra');

